import { Form, Input, Button, Checkbox, Row, Col } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useState } from 'react';
import './login.less';
import { useDispatch } from 'umi';
export default function Login() {
  const dispatch = useDispatch();
  const [url, setUrl] = useState('');
  //点击登录验证成功时
  const onFinish = async (values: any) => {
    dispatch({ type: 'login/LOGIN', payload: values });
  };
  //点击登录验证失败
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  const changeCaptcha = () => {
    setUrl("?t="+new Date().getTime())
  };
  return (
    <div className="login">
      {/* form表单 */}
      <div className="form">
        <Form
          name="basic"
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          {/* 用户名 */}
          <Form.Item
            name="user_name"
            rules={[{ required: true, message: 'Please input your username!' }]}
            initialValue="heinan"
          >
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="账号"
            />
          </Form.Item>
          {/* 密码 */}
          <Form.Item
            name="user_pwd"
            rules={[{ required: true, message: 'Please input your password!' }]}
            initialValue="1qaz!QAZ"
          >
            <Input.Password
              placeholder="密码"
              prefix={<LockOutlined className="site-form-item-icon" />}
            />
          </Form.Item>
          <Form.Item name="captcha">
            <Row>
              <Col span={12} style={{ display: 'flex', alignItems: 'center' }}>
                <Input placeholder="验证码" />
              </Col>
              <Col span={12}>
                <img
                  src={'/api/captcha' + url}
                  alt=""
                  onClick={changeCaptcha}
                />
              </Col>
            </Row>
          </Form.Item>
          {/* 记住密码、类型选择 */}
          <div className="forget">
            <Form.Item name="remember" valuePropName="checked">
              <Checkbox className="pwd" style={{ color: '#000' }}>
                记住密码
              </Checkbox>
            </Form.Item>
            <span>记住密码</span>
          </div>
          {/* 登录按钮 */}
          <Form.Item>
            <Button type="primary" htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
      {/* 注册商标 */}
      <div className="registry">
        <span>Copyright © 2020-2021 bawei.vip All Rights Reserved.</span>
      </div>
    </div>
  );
}
